<!--
 * @Date: 2024-04-08 15:19:12
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-07-29 15:57:23
 * @Description: 数字输入框
-->
<template>
  <el-input-number
    :="compAttrs"
    :style="{
      width: `${compStore.width}px`
    }"
    :modelValue="compValue"
    @change="handleChange"
    @focus="handleSelectAll($event)"
  >
  </el-input-number>
</template>

<script setup>
// import $ from 'jquery'
import { reactive, watch, ref } from 'vue';
import { NumberUtils } from '@/utils';

// 向上的事件
const emits = defineEmits(['update:modelValue'])

// 属性的定义
const props = defineProps({
  min: { type: Number },
  width: { type: Number, default: 100 },
  undeline: { type: Boolean, default: true },
  autoWidth: { type: Boolean, default: true },
  precision: { type: Number, default: 2 },
  modelValue: { type: [String, Number] },
  // 是否全选
  selectAll: { type: Boolean, default: false },
})

// 组件的值
const compValue = ref(void 0)

// 组件的配置
const compAttrs = reactive({
  min: props.min,
  class: props.undeline ? "underline-input" : '',
  controls: false,
  // precision: props.precision
})

const compStore = reactive({
  // 输入框宽度
  width: props.width
})

// /**
//  * 获取文字内容的宽度
//  * 
//  * @param text 文字内容
//  */
// const getTextWidth = (text) => {
//   const sensor = $('<pre>'+ text +'</pre>').css({display: 'none'});
//   $('body').append(sensor);
//   let width = sensor.width();
//   sensor.remove();
//   return width;
// }
// /**
//  * 设置输入框的宽度
//  * 
//  * @param text 文字内容
//  */
// const setInputWidth = (text) => {
//   if (!props.autoWidth) return
//   nextTick(() => {
//     if (!text) return
//     text = props.precision ? Number(text || 0).toFixed(2) : text
//     const { width: defaultWidth } = props
//     const dyncWidth = getTextWidth(text)
//     const finalWidth = (dyncWidth + 22 + 10 + 8)
//     compStore.width = (finalWidth > defaultWidth) ? finalWidth : defaultWidth
//   })
// }
/**
 * 在 Input 值改变时触发
 *
 * @param value 输入的值
 */
const handleChange = (value) => {
  if (isNotEmpty(value)) {
    emits('update:modelValue', NumberUtils.formatValue(value, props.precision))
  } else {
    emits('update:modelValue', compAttrs.min || '')
  }
}
/**
 * 在 Input 默认选中
 *
 * @param value 输入的值
 */
const handleSelectAll = (event) => {
  if (props.selectAll) {
    event.currentTarget.select()
  }
}
/**
 * 是否为空
 * @param value 输入内容
 */
const isNotEmpty = (value) => {
  return !(value === '' || value === undefined || value === null)
}

watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    // 内容不为空
    if (isNotEmpty(newValue)) {
      if (Number.isNaN(Number(newValue))) {
        compValue.value = undefined
      } else {
        let targetValue = Number(newValue)
        if (isNotEmpty(props.min)) {
          if (targetValue < props.min) {
            compValue.value = props.min
          } else {
            compValue.value = targetValue
          }
        } else {
          compValue.value = targetValue
        }
      }
    } else {
      compValue.value = undefined
    }
    // setInputWidth(newValue)
  },
  { deep: false, immediate: true }
)
</script>

<style lang="scss" scoped>
</style>
